import styled from "styled-components";
import bgimg from "@/assets/img/wrap-bg.png";
import phonograph from "@/assets/img/coverall.png"
// import icon from "@/assets/img/coverall.png"
export const PlayerWrapper = styled.div`
    .content{
        background:url(${bgimg}) repeat-y;
        display:flex;
        min-height: 700px;
    }
`
export const PlayerLeft = styled.div`
     width:710px;
     padding: 47px 30px 40px 39px;
     .lyric{
         width:640px;
         display:flex;
         .lyric-left{
             position:relative;
             width: 206px;
             margin-left:39px;
             margin-top:25px;
            img{
                width:130px;
                height: 130px;
                border-radius:50%;
            }
            span{
                display:inline-block;
                position:absolute;
                top:-38px;
                left:-38px;
                width: 206px;
                height: 205px;
                background:url(${phonograph});
                background-position: -140px -580px;
            }
            .site{
                width:121px;
                margin-top:52px;
                text-align:center;
                i{
                    display:inline-block;
                    width: 16px;
                    height: 16px;
                    background-position: -34px -863px;
                }
                a{
                    color:#0c73c2;
                    text-decoration:underline;
                }
            }
         }
        .lyric-right{
             flex:1;
             .LR-top{
                 width:100%;
                .songName{
                    display:flex;
                    align-items:center;
                    i{
                        display:inline-block;
                        width: 54px;
                        height: 24px;
                        background-position: 0 -463px;
                    }
                    p{
                        font-size:24px;
                        color:#333;
                        margin-left:10px;
                    }
                }
                .author{
                    margin-top:10px;
                    a{
                        color:#1890ff;
                    }
                }
                .album{

                }
                .operation{
                    display:flex;
                    align-items:center;
                    margin-top:10px;
                    .play{
                        width:66px;
                        height: 31px;
                        background-position: 0 -387px;
                        color:#fff;
                        display:flex;
                        align-items:center;
                        padding-left:6px;
                        cursor:pointer;
                        &:hover{
                            background-position: 0 -469px;
                            i{
                                background-position: -28px -1622px;
                            }
                        }
                        i{
                            display:inline-block;
                            width: 20px;
                            height: 20px;
                            background-position: 0 -1622px;
                            margin-right:3px;
                        }
                    }
                    .addto{
                        width:31px;
                        height:31px;
                        background-position: 0 -1588px;
                        cursor:pointer;
                        &:hover{
                            background-position: -40px -1588px;
                        }
                    }
                    .collect{
                        width:60px;
                        height:31px;
                        margin-left:5px;
                        background-position: right -1020px;
                        .collectIcon{
                            display:inline-block;
                            height: 31px;
                            line-height: 30px;
                            min-width: 23px;
                            cursor: pointer;
                            padding-right: 4px;
                            padding-left: 28px;
                            background-position: 0 -977px;
                        }
                        &:hover{
                         i{
                            background-position: 0 -1063px;
                         }
                     }
                    }
                    .share{
                        .shareIcon{
                        background-position: 0 -1225px ;
                     }
                     &:hover{
                         i{
                            background-position: 0 -1268px ;
                         }
                     }
                }
                .download{
                        .downloadIcon{
                            background-position: 0 -2761px;
                     }
                     &:hover{
                         i{
                            background-position: 0 -2805px;
                         }
                     }
                 }
                 .information{
                        width:80px;
                        height:31px;
                        .informationIcon{
                            background-position: 0 -1465px;
                     }
                     i{
                        width:75px;
                     }
                     &:hover{
                         i{
                            background-position: 0 -1508px;
                         }
                     }
                }
             }
        }
        .lyric-content{
            display:flex;
            flex-direction:column;
            margin-top:20px;
            height: auto;
            p{
                box-sizing:border-box;
                margin-top:10px;
            }
            .more{
                display:${props=>props.isUnfold?"block":"none"};
            }
            .unfold{
                    display:${props=>props.isUnfold?"none":"block"};
                    color:#0c73c2;
                    cursor:pointer;
                   i{
                    display:inline-block;
                    width: 11px;
                    height: 8px;
                    background-position:-45px -520px;
                   }
                }
                .pack-up{
                    margin-top:10px;
                    display:${props=>props.isUnfold?"block":"none"};
                    color:#0c73c2;
                    cursor:pointer;
                   i{
                    display:inline-block;
                    width: 11px;
                    height: 8px;
                    background-position:-65px -520px;
                   }
                }
        }
      }
    }
`
export const PlayerRight = styled.div`
    width:270px;
    padding:20px 40px 40px 30px;

`